<template>
	<div class="index">
		<div v-for="item in data" class="index-head"><a href="http://www.baidu.com">{{item.title}}</a></div>
			<div class="index-box">
				
					<div class="index-box-data" v-for="(item,idx) in listData">  
					
						<img :src="item.img">
					
						<div class="index-box-data-ap">{{item.name}}</div>
						<div class="index-box-data-p">{{item.platform}}</div>
						<div class="index-box-data-p">{{item.class}}</div>
						<div class="index-box-data-p">{{item.number}}</div>
						<div class="index-box-data-p">
							{{item.price}}
							<button  @click="del(idx)">取消</button>
							</div>
				
				</div>
				
			</div>
	</div>
</template>

<script>
import { getlistData } from '@/api'
export default {
	name: 'index',
	data() {
		return {
			arr: [],
			listData:  JSON.parse(sessionStorage.getItem('item')) || [],
			routeid: this.$route.params.id || '',
			data:[{
				title:"图片",
			},{
				title:"名称",
			},{
				title:"机构",
			},{
				title:"课时",
			},{
				title:"热度",
			},{
				title:"价格",
			}]
		}
	},
	created() {
		getlistData().then(res => {
			this.arr = res.data.data
			this.arr.forEach((item, idnex) => {
				if (item.id == this.routeid) {
					this.listData.push(item)
				}
			})
			sessionStorage.setItem('item', JSON.stringify(this.listData))
		})
	},
	methods:{
		del(i){
			this.listData.splice(i,1)
		}
	}
}
</script>
<!-- v-for="item in listData" -->
<style lang="less" scoped>
.index{
	width: 1200px;
	// height: 1000px;
	margin: 0 auto;
	// background-color: aquamarine;
	.index-head{
		width: 190px;
		// background-color: yellow;
		float: left;
		text-align: center;
		height: 50px;
		line-height: 50px;
		font-size: 20px;
		margin: 10px 5px 10px 5px;
		border-bottom: 1px solid rgb(164, 160, 160);
		a{
			text-decoration: none;
			color: black;
		}
		a:hover{
			color: rgb(43, 110, 168);
		}
		}
		.index-box{
		width: 1200px;
		overflow: hidden;
		// background-color: aqua;
			.index-box-data{
				display: flex;
				// flex-wrap: nowrap;
				width: 1200px;
				
				// background-color: red;
				margin: 20px 0;
				// float: left;
				text-align: center;
				img{width: 200px;}
				// div{text-align: center; width: 200px;}
				.index-box-data-p{
					height: 50px;
					width: 200px;
					line-height: 100px;
					// border-bottom: 1px solid black;
					// background-color: rebeccapurple;
					button{
						border: none;
						background-color: rgb(173, 95, 95);
						margin-left: 10px;
						// margin-top: -10px;
					}
				}
				.index-box-data-ap{
					width: 180px;
					margin-top: 30px;
					margin-left: 20px;
				}
			}
	}
	
		
		
	


}
</style>
